<template>
  <q-layout view="hHh lpR fFf">
    <!-- 头部 -->
    <q-header elevated class="headerBox" height-hint="60">
      <q-toolbar class="toolbarBox">
        <q-toolbar-title class="titleBox">
          <q-avatar style="margin-right: 10px">
            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
          </q-avatar>
          {{ title }}
        </q-toolbar-title>

        <q-tabs align="right">
          <q-route-tab to="/main/home" label="首页" />
        </q-tabs>
        <!-- 切换主题 -->
        <q-toggle
          v-model="first"
          color="white"
          icon-color="grey-9"
          checked-icon="wb_sunny"
          unchecked-icon="dark_mode"
        />
        <!-- 显影右侧抽屉按钮 -->
        <q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
      </q-toolbar>
    </q-header>
    <!-- 右侧抽屉 -->
    <q-drawer v-model="rightDrawerOpen" side="right" overlay bordered>
      <div class="publicBg drawerContent"></div>
    </q-drawer>

    <!-- 页面容器 -->
    <q-page-container>
      <q-page class="pageContainer">
        <router-view />
      </q-page>
    </q-page-container>

    <!--  页脚 -->
    <q-footer bordered elevated class="footerBox" v-if="false">
      <q-toolbar>
        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
          </q-avatar>
          <div>Title</div>
        </q-toolbar-title>
      </q-toolbar>
    </q-footer>
  </q-layout>
</template>

<script name="mainIndex">
import { ref, onUnmounted, watch, getCurrentInstance } from 'vue'
import { pinia } from '@/stores'
import { store } from '@/stores'
import { storeToRefs } from 'pinia'
export default {
  setup() {
    //  获取全局事件
    const instance = getCurrentInstance()
    //  项目名称
    let title = ref(import.meta.env.VITE_VUE_APP_TITLE)

    // 右侧抽屉状态
    const rightDrawerOpen = ref(false)

    // 切换右侧抽屉状态
    const toggleRightDrawer = () => {
      rightDrawerOpen.value = !rightDrawerOpen.value
    }

    //  修改主题
    const themeStore = store.system.useThemeStore()

    //  这里存到localStorage里面， 根据值判断显示
    let localTheme = instance?.proxy?.$getLocalStorage('theme')
    let first = localTheme == 'dark' ? ref(false) : ref(true)
    if (localTheme) {
      themeStore.toggleTheme(localTheme)
    } else {
      themeStore.toggleTheme('light')
    }
    watch(first, (newValue, oldValue) => {
      if (newValue) {
        themeStore.toggleTheme('light')
        instance?.proxy?.$setLocalStorage('theme', 'light')
      } else {
        themeStore.toggleTheme('dark')
        instance?.proxy?.$setLocalStorage('theme', 'dark')
      }
    })

    return {
      title,
      rightDrawerOpen,
      toggleRightDrawer,
      first
    }
  }
}
</script>
<style lang="less" scoped>
.toolbarBox {
  height: 60px;
}
.titleBox {
  display: flex;
  align-items: center;
}
.pageContainer {
  height: calc(100vh - 98px);
}
.publicBg {
  background-color: var(--themeBackgroundColor1);
}
.drawerContent {
  width: 100%;
  height: 100%;
}
.footerBox {
  color: var(--themeFontColor1);
  background-color: var(--themeBackgroundColor3);
}
.headerBox {
  color: var(--themeFontColor1);
  background-color: var(--themeBackgroundColor2);
  border-bottom: 1px solid var(--themeBorderColor1);
}
:deep(.q-drawer--left.q-drawer--bordered) {
  border-right: 1px solid var(--themeBorderColor1);
}
:deep(.q-drawer--right.q-drawer--bordered) {
  border-left: 1px solid var(--themeBorderColor1);
}
</style>
